<template>
  <div class="department-nav">
    <div class="section-title">科室导航</div>
    <van-grid :column-num="4">
      <van-grid-item v-for="(dept, index) in departments" :key="index" @click="onDeptClick(dept.id)">
        <div class="dept-icon" :style="{ background: dept.bgColor }">
          <van-icon :name="dept.icon" :color="dept.iconColor" size="24" />
        </div>
        <div class="dept-name">{{ dept.name }}</div>
      </van-grid-item>
    </van-grid>
  </div>
</template>

<script setup lang="ts">
import { useRouter } from 'vue-router'

const router = useRouter()

interface Department {
  id: number
  name: string
  icon: string
  bgColor: string
  iconColor: string
}

const departments: Department[] = [
  { id: 1, name: '心内科', icon: 'like-o', bgColor: '#E6F7FF', iconColor: '#1890FF' },
  { id: 2, name: '呼吸科', icon: 'filter-o', bgColor: '#F9F0FF', iconColor: '#722ED1' },
  { id: 3, name: '神经科', icon: 'cluster-o', bgColor: '#FFF7E6', iconColor: '#FA8C16' },
  { id: 4, name: '骨科', icon: 'todo-list-o', bgColor: '#FCF2F8', iconColor: '#EB2F96' },
  { id: 5, name: '眼科', icon: 'eye-o', bgColor: '#E6FFFB', iconColor: '#13C2C2' },
  { id: 6, name: '口腔科', icon: 'smile-o', bgColor: '#F6FFED', iconColor: '#52C41A' },
  { id: 7, name: '儿科', icon: 'friends-o', bgColor: '#FEF5E7', iconColor: '#F59A23' },
  { id: 8, name: '更多', icon: 'apps-o', bgColor: '#F5F5F5', iconColor: '#878D99' }
]

const onDeptClick = (deptId: number) => {
  if (deptId === 8) {
    // 更多
    router.push(`/hospital/${123}/departments`) // 应该用实际的医院ID
  } else {
    router.push(`/hospital/${123}/department/${deptId}`) // 应该用实际的医院ID
  }
}
</script>

<style scoped lang="scss">
.department-nav {
  background: #fff;
  padding: 16px;
  margin-bottom: 8px;
  
  .section-title {
    font-size: 16px;
    font-weight: 500;
    color: #333;
    margin-bottom: 16px;
  }
  
  :deep(.van-grid-item__content) {
    padding: 8px 0;
  }
  
  .dept-icon {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 8px;
  }
  
  .dept-name {
    font-size: 12px;
    color: #333;
  }
}
</style> 